import React , { Component } from 'react';
class View extends Component {
    constructor(props){
        super(props);
        this.state =  {
            isGoing:false,
            checkNode:[
                {checked:false,name:"Vue"},
                {checked:false,name:"React"},
                {checked:false,name:"Angular"},
                {checked:false,name:"Ember"},
                {checked:false,name:"Omi"},
            ]
        }
    }
    handleInputChange(e){
        let checked = e.target.checked;
        let name = e.target.name;
        if(checked){
            this.state.checkNode.forEach(v=>{
                v.checked = true;
            })
        }else {
            const obj = this.state.checkNode;
            for(let index in obj){
                obj[index].checked = false;
            }
        }
        this.setState({
            [name]:checked
        })
    }
    handleChange(e,key){
        const checkNode = this.state.checkNode;
        checkNode[key].checked = !checkNode[key].checked
        // this.state.checkNode[0].checked
        let bTrue = true;
        for(let i=0,len=checkNode.length;i<len;i++){
            if(!checkNode[i].checked){
                bTrue = false;
                break;
            }
        }
        this.setState({
            isGoing:bTrue,
            checkNode
        })
    }
    render(){
        // console.log(this.state.isGoing)
        const checkList = this.state.checkNode.map((val,key)=>(
            <p key={key}>
                <input type="checkbox"
                    checked={val.checked}
                    onChange={(e)=>this.handleChange(e,key)}
                />
                <label>{val.name}</label>
            </p>
        ))
        return(
            <div>
                <h2>今天要讲checkbox 的demo</h2>
                <input
                name="isGoing"
                type="checkbox"
                checked={this.state.isGoing}
                onChange={(e)=>this.handleInputChange(e)} />
                {checkList}
            </div>
        )
    }
}
export default View;
